<template>
  <div>
    <setup-h />
    <setup-args
      :count="count"
      @add="add"
    ></setup-args>
    <vue-3-point-2></vue-3-point-2>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured, ref, reactive } from 'vue';
import SetupH from './components/SetupH.vue';
import SetupArgs from './components/SetupArgs.vue';
import Vue3Point2 from './components/Vue3Point2.vue';

export default {
  name: 'App',
  components: {
    SetupH,
    SetupArgs,
    Vue3Point2
  },
  setup() {
    const count = ref(1);
    const state = reactive({
      foo: 'bar',
    });

    onBeforeMount(() => {
      console.log('App onBeforeMount');
    });

    onMounted(() => {
      console.log('App onMounted');
    });

    onBeforeUpdate(() => {
      console.log('App onBeforeUpdate');
    });

    onUpdated(() => {
      console.log('App onUpdated');
    });

    onBeforeUnmount(() => {
      console.log('App onBeforeUnmount');
    });

    onUnmounted(() => {
      console.log('App onUnmounted');
    });

    onActivated(() => {
      console.log('App onActivated');
    });

    onDeactivated(() => {
      console.log('App onDeactivated');
    });

    onErrorCaptured(() => {
      console.log('App onErrorCaptured');
    });

    const add = (num) => (count.value += num);

    return {
      count,
      state,
      add,
    };
  },
};
</script>
